<template>
	<view class="container">
		<view class="top flex items-center" :style="[{ 'padding-top': topH + 'px', 'padding-right': searchr + 'px' }]">
			<view class="search flex items-center justify-between flex-1" @click="goUrl('/pages/product/search')">
				<image src="/static/product/ic_searchgray.png" class="s-icon"></image>
				<input type="text" placeholder="搜索商品" class="inp flex-1" placeholder-class="inp-place" />
				<view class="search-icon">搜索</view>
			</view>
		</view>

		<view class="fill flex justify-between">
			<view class="cate-1 flex flex-col" @click="aaa">
				<view :class="{ active: cate1Index == index }" class="item" v-for="(item, index) in listCate1" @click="changeProductCate(item.id, index)">{{ item.title }}</view>
			</view>

			<view class="cate-2 flex-1">
				<view class="row flex items-center">
					<view
						class="item flex flex-col items-center justify-between"
						v-for="(item, index) in listCate2"
						v-if="listCate2.length > 0"
						@click="goUrl('/pages/product/product-list?cate_2=' + item.id)"
					>
						<image :src="imgUrl + item.icon" class="icon"></image>
						<text class="name">{{ item.title }}</text>
					</view>

					<view class="flex-1" style="text-align: center; color: #999; font-size: 26rpx" v-else>暂无</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, inject } from 'vue';

	import { port, imgUrl, goUrl, hint, goBack } from '/service/port';

	import { onReachBottom, onPullDownRefresh, onLoad, onShow } from '@dcloudio/uni-app';
	import { useTitleStore } from '@/stores/title';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();

	onLoad(() => {
		uni.setNavigationBarTitle({
			title: useTitleStore().globalTitle
		});
	});
	const topH = ref(15);
	const searchr = ref(15);

	onShow(() => {
		// #ifdef MP-WEIXIN
		const menuInfo = inject('menuButtonInfo');
		topH.value = menuInfo.top;
		searchr.value = menuInfo.width + 25;
		// #endif

		getProductCate();
	});

	const keyword = ref('');
	const listCate1 = ref([]);
	const listCate2 = ref([]);
	const cate1Index = ref(0);

	function search() {
		keyword.value ? goUrl('/pages/product/product-list?keyword=' + keyword.value) : hint('请填写关键字进行搜索');
	}

	async function getProductCate() {
		let res = await port('getProductCate');

		listCate1.value = res.data;

		if (res.data.length > 0) {
			changeProductCate(res.data[0].id, 0);
		}
	}

	async function changeProductCate(pid, index) {
		console.log(111);
		cate1Index.value = index;
		let res = await port('getProductCate', { pid: pid });
		listCate2.value = res.data;
	}
</script>

<style scoped lang="scss">
	::v-deep {
		page {
			background-color: #fff;
		}
	}

	.top-bg {
		position: fixed;
		top: 0;
		width: 100%;
		height: 428rpx;
		z-index: 2;
	}

	.container {
		position: relative;
		z-index: 9;
		.top {
			padding: 30rpx;
			padding-bottom: 36rpx;
			.left-icon {
				margin-right: 19rpx;
			}
			.search {
				background: #f0f0f0;
				border-radius: 36rpx;
				padding: 6rpx;

				.s-icon {
					width: 34rpx;
					height: 34rpx;
					margin-left: 12rpx;
				}
				.inp {
					font-weight: 400;
					font-size: 26rpx;
					margin-left: 15rpx;
				}
				.inp-place {
					color: #bdbdbd;
				}
				.search-icon {
					width: 120rpx;
					height: 56rpx;
					line-height: 56rpx;
					background: $theme-bg-btn-color;
					border-radius: 30rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #ffffff;
					text-align: center;
				}
			}
		}

		.fill {
			.cate-1 {
				height: calc(100vh - 114rpx);
				background: #f0f0f0;
				border-radius: 0rpx 30rpx 0rpx 0rpx;
				box-sizing: border-box;
				padding-top: 20rpx;
				.item {
					margin: 27rpx 0;
					// width: 180rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;

					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.active {
					background: $theme-bg-btn-color;
					border-radius: 31rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #ffffff;
					margin: 17rpx 20rpx;
					padding: 10rpx 17rpx;
					box-sizing: border-box;
				}
			}

			.cate-2 {
				.row {
					margin: 0 24rpx;
					border-radius: 20rpx;
					background: #ffffff;
					padding: 15rpx 13rpx;
					flex-wrap: wrap;
					width: calc(100% - 48rpx);
					box-sizing: border-box;

					.item {
						width: 33.333%;
						margin: 15rpx 0;
						.icon {
							width: 106rpx;

							height: 106rpx;
							border-radius: 50%;
						}
						.name {
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							margin-top: 8rpx;
						}
					}
				}
			}
		}
	}
</style>
